<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
          <vue-area-4
              areaId="areaId"
              areaName="areaName"
              :areaIdVal="staff.dto().areaId"
              :areaNameVal="staff.dto().areaName"
              :areaFixed="staff.dto().areaId"
              :selectBy="staff.dto().areaId"
          ></vue-area-4>
          <div class="form-group">
            <label class="font-noraml">时间</label>
            <div class="input-group" style="width:100px;">
              <select name="dateType" class="form-control">
                <option value="0">全部</option>
                <option value="1">本月</option>
                <option value="2">上月</option>
                <option value="3">今年</option>
                <option value="4">去年</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
          </div>
        </form>
        <a href="javascript:;" @click="exportXls()" v-if='staff.hasPermission("analysis:complaint:treatment:export:xls")' class="btn btn-info m-t"><i class="fa fa-file-excel-o"></i> 导出数据</a>
        <div class="table-responsive table-scrollable">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>行政区划</th>
              <th>投诉个数</th>
              <th>已解决个数</th>
              <th>未解决个数</th>
              <th>超5天未解决个数</th>
              <th>处理率</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
              <td>{{ apiUtil.replace(item.areaName, '四川省,内江市,', '') }}</td>
              <td>{{ item.complaintsNumber }}</td>
              <td>{{ item.solvedNumber }}</td>
              <td>{{ item.complaintsNumber - item.solvedNumber }}</td>
              <td>{{ item.unsettled5DaysNumber }}</td>
              <td>{{ ((item.solvedNumber / item.complaintsNumber) * 100).toFixed(2) }}%</td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="7">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="b_page" v-html="tagPages"></div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="echarts" id="echarts-bar-chart"></div>
    </div>
  </div>
</template>
<style>
.echarts {
  height: 540px;
}
</style>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import {$storage, apiUtil, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'
import echarts from 'echarts'
import vueArea4 from '@/components/vue-area-4'
import Swal from 'sweetalert2'

var pieChartAreaRate;
var pieoptionAreaRate;
export default {
  components: {
    'vue-area-4': vueArea4
  },
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.initChart();
      that.page(1);
    });
  },
  methods: {
    initChart() {
      pieChartAreaRate = echarts.init(document.getElementById('echarts-bar-chart'));
      pieoptionAreaRate = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['投诉', '已解决', '未解决', '超5天未解决']
        },
        grid: {
          x: 30,
          x2: 40,
          y2: 24
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      };
      for (let i = 0; i < pieoptionAreaRate.legend.data.length; i++) {
        pieoptionAreaRate.series[i] = {
          name: pieoptionAreaRate.legend.data[i],
          type: 'bar',
          data: [],
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      }
      window.onresize = pieChartAreaRate.resize;
    },
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      if (pageIndex === 1) {
        that.areaRate();
      }
      axios.post(site.analysis.complaintTreatment.areaPage + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          Swal.fire(result.message);
        }
      });
    },
    areaRate() {
      for (let i = 0; i < pieoptionAreaRate.xAxis.length; i++) {
        pieoptionAreaRate.xAxis[i].data = [];
      }
      for (let i = 0; i < pieoptionAreaRate.series.length; i++) {
        pieoptionAreaRate.series[i].data = [];
      }
      // let that = this;
      axios.post(site.analysis.complaintTreatment.areaRate
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let dataItems = result.data;
          if (dataItems && dataItems.length > 0) {
            // console.info(pieoptionAreaRate.series.data)
            for (var dataItem of dataItems) {
              // * 行政区划 X轴
              let areaName = apiUtil.replace(dataItem.areaName, '四川省,内江市,', '');
              pieoptionAreaRate.xAxis[0].data.push(areaName);
              // * 投诉个数
              let complaintsNumber = dataItem.complaintsNumber;
              // * 已解决个数
              let solvedNumber = dataItem.solvedNumber;
              // * 未解决个数
              let unsettledNumber = dataItem.complaintsNumber - dataItem.solvedNumber;
              // * 超5天未解决个数
              let unsettled5DaysNumber = dataItem.unsettled5DaysNumber;
              // * -----
              pieoptionAreaRate.series[0].data.push(complaintsNumber);
              pieoptionAreaRate.series[1].data.push(solvedNumber);
              pieoptionAreaRate.series[2].data.push(unsettledNumber);
              pieoptionAreaRate.series[3].data.push(unsettled5DaysNumber);
            }
          } else {
            pieoptionAreaRate.series[0].data = [0];
            pieoptionAreaRate.series[1].data = [0];
            pieoptionAreaRate.series[2].data = [0];
            pieoptionAreaRate.series[3].data = [0];
          }
          pieChartAreaRate.setOption(pieoptionAreaRate);
        } else {
          Swal.fire(result.message);
        }
      });
    },
    exportXls() {
      let formJson = $('#info_search_form').serializeObject();
      // console.info(formJson)
      var formHtmlStr = `<form method="post" action="${site.analysis.complaintTreatment.exportXls}">
                               <input type="hidden" name="Authorization" value="${$storage.getItem('authorizationToken')}">`;
      for (let key in formJson) {
        // console.info(key)
        formHtmlStr += `<input type="hidden" name="${key}" value="${formJson[key]}">`;
      }
      formHtmlStr += `</form>`;
      // console.info(formHtmlStr)
      var $eleForm = $(formHtmlStr);
      $(document.body).append($eleForm);
      // 提交表单，实现下载
      $eleForm.submit().remove();
    }
  }
}
</script>
